// 会议详情
import React, { useEffect } from 'react';
import { observer, useLocalStore } from 'mobx-react-lite';
import { useLocation } from 'react-router';
import { parse } from 'qs';
import moment from 'moment';
import * as detailApi from '~/apis/events/addApi';
import './index.local.sass';

const EventsDetails = observer(() => {
  const location = useLocation();
  const params = parse(location.search, { ignoreQueryPrefix: true });

  const state = useLocalStore(() => ({
    eventsId: params.id || '',
    eventsInfo: '' as any,
    fileUrlPrefix: '', // 文件地址前缀
    coverImage: '', // 图片
    attachmentUrl: '',
  }));

  // 获取会议详情
  const getEventsInfo = () => {
    detailApi.getEvents(state.eventsId).then((res) => {
      state.eventsInfo = res.data ? res.data : null; // 会议详情
      state.fileUrlPrefix = res.file_prefix; // 文件地址前缀
      if (res.data && res.data.coverImage) {
        state.coverImage = `${res.file_prefix as string}${res.data.coverImage as string}`; // 图片
      }
      if (res.data && res.data.attachment) {
        state.attachmentUrl = `${res.file_prefix as string}${res.data.attachment as string}`; // 图片
      }
    });
  };
  useEffect(() => {
    getEventsInfo();
  }, []);

  const eventsInfo: any = state.eventsInfo;

  return (
    <div>
      <div className='detail-container'>
        <h2>{eventsInfo.eventsTitle ? eventsInfo.eventsTitle : ''}</h2>
        <div className='detail-tag'>
          <span><em>Country/Region: </em> {eventsInfo.countryName ? eventsInfo.countryName : ''}</span>
          <span><em>Date: </em> {eventsInfo.createTime ? moment(eventsInfo.createTime).format('YYYY/MM/DD') : ''}</span>
          <span><em>Attachments: </em> <a href={state.attachmentUrl }>{eventsInfo.attachment}</a></span>
        </div>
        <img src={ state.coverImage } alt=''/>
        <div className='detail-content'>
          <div dangerouslySetInnerHTML={{ __html: eventsInfo.content }}/>
        </div>
      </div>
    </div>
  );
});

export default EventsDetails;
